嗨嗨！我是Winnie溫尼～

前言

前面的章節，我們認識到了DOM元素，也認識到包括querySelector、getElements選擇器，那麼選取到DOM元素，一定要對它動動手腳的吧！所以今天要介紹的是如何使用textContent、innerHTML修改文字內容～！

選擇器

通常使用選擇器選取DOM元素時會將其宣告為一個變數，以方便日後選取使用。
const 變數名稱 = document.querySelector("html標籤/.css/#id");

textContent

在選取的範圍中修改或寫入文字內容，原有的文字內容會被新的覆蓋掉。
變數名稱.textContent = "新的內容";
例：

<!-- HTML -->
<h1>標題</h1>

//JavaScript
const title = document.querySelector("h1") //選取h1中所有內容
title.textContent = "Hello World!" //將「標題」文字修改成「Hello World!」
console.log(title) //<h1>Hello World!</h1>

innerHTML

在選取的範圍中修改或寫入HTML標籤及文字內容，原有的HTML標籤及文字內容會被新的覆蓋掉。
變數名稱.innerHTML = `<HTML標籤>新的內容</HTML標籤>`;
例：

<!-- HTML -->
<div class="container">
  <p>今天是禮拜二！</p>
  <p>你好嗎？</p>
</div>

//JavaScript
const container = document.querySelector(".container") //選取.container中所有內容
container.innerHTML = `<h1>鐵人賽Day20</h1>` 
//將「今天是禮拜二！」、「你好嗎？」文字修改成「鐵人賽Day20」，且HTML標籤也從原本的<p></p>修改成<h1></h1>
console.log(container) 
//<div class="container">
//  <h1>鐵人賽Day20</h1>
//</div>

參考資料

JS - innerHTML vs. textContent
Node.textContent
Element.innerHTML

新手上路，如文章有錯誤或需修正之處，懇請大家多多指教！
那麼，我們明天見囉～